<template>
  <section class="goods_detail_wrapper">
    <c-nav-bar title="商品详情" />
    <section class="p_t_46 p_b_50">
      <!-- bg -->
      <div class="goods_img">
        <van-swipe :autoplay="3000">
          <van-swipe-item>
            <van-image
              width="100%"
              height="100%"
              src="http://snsall.oss-cn-qingdao.aliyuncs.com/DF4D69929FD7F405/user/76281/f638b14d-0505-47fc-8e55-408bdfeba345..jpg?x-oss-process=image/resize,m_fixed,h_750,w_750"
            />
          </van-swipe-item>
          <van-swipe-item>
            <van-image
              width="100%"
              height="100%"
              src="http://snsall.oss-cn-qingdao.aliyuncs.com/DF4D69929FD7F405/user/76281/f638b14d-0505-47fc-8e55-408bdfeba345..jpg?x-oss-process=image/resize,m_fixed,h_750,w_750"
            />
          </van-swipe-item>
          <template #indicator="{ active }">
            <div class="custom-indicator">{{ active + 1 }}/2</div>
          </template>
        </van-swipe>
      </div>
      <!-- detail -->
      <div class="goods_detail">
        <div class="goods_detail_title font-18">
          <span>
            90%人没吃过：正宗金太阳一级杏5斤包邮包售后不甜退款不退货
          </span>
        </div>
        <div class="priceColor font-18">
          <span> ￥45.60 </span>
        </div>
        <div class="sku" @click="onHandleClickSKU">
          <span> 请选择商品规格 </span>
          <van-icon name="arrow" />
        </div>
        <!-- 評價 -->
        <van-tabs v-model:active="active" swipeable class="customer-tabs">
          <van-tab
            v-for="(item, index) in ['详情', '评价']"
            :title="`${item}`"
            :key="index"
          >
            {{ item }}
          </van-tab>
        </van-tabs>
      </div>
      <!-- SKU -->
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :quota="quota"
        :quota-used="quotaUsed"
        :hide-stock="sku.hide_stock"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
      />
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </section>
  </section>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      show: true,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: "https://img01.yzcdn.cn/1.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "https://img01.yzcdn.cn/1p.jpg", // 用于预览显示的规格类目图片
              },
              {
                id: "1",
                name: "蓝色",
                imgUrl: "https://img01.yzcdn.cn/2.jpg",
                previewImgUrl: "https://img01.yzcdn.cn/2p.jpg",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "", // 可选值，占位文本
            extraDesc: "", // 可选值，附加描述文案
          },
        ],
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        picture: "https://img01.yzcdn.cn/1.jpg",
        // 数据结构见下方文档
      },
    };
  },
  methods: {
    onHandleClickSKU() {
      this.show = true;
    },
  },
  // setup() {
  //   const show = ref(false);

  //   const onHandleClickSKU = () => {
  //     show = true;
  //   };
  //   return {
  //     show,
  //     onHandleClickSKU,
  //   };
  // },
});
</script>

<style lang="scss" scoped>
.goods_detail_wrapper {
  .goods_img {
    width: 375px;
    height: 375px;
  }
  .goods_detail {
    padding: 0 12px;
    .goods_detail_title {
      padding: 12px 0;
    }
    .sku {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
    }
  }
}
</style>
